<template>
	<div ref="container" class="container">
		<div>
			<!--热门城市-->
			<div class="hotcity">
				<div class="title">
					热门城市
				</div>
				<div class="list">
					<ul>
						<li class="item" v-for="item in hotCities" :key="item.id" @click="changeCityName(item.name)"     >{{item.name}}</li>
					</ul>
				</div>
			</div>
			
			<!--字母排序-->
			<div class="sort">
				<div class="title">
					字母排序
				</div>
				<div class="list">
					<ul>
						<li class="item" v-for="(val,key) in cities"  :key="key"  @click="changeSort(key)" >{{key}}</li>
					</ul>
				</div>
			</div>
			
			<!--城市列表-->
			<div class="citylist">
				<div class="list" v-for="(val,key) in cities" :key="key" :ref="key">
					<div class="title">{{key}}</div>
					<div class="list-item">
						<ul>
							<li class="item" v-for="item in val" :key="item.id" @click="changeCityName(item.name)" >{{item.name}}</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
</template>

<script>
import BScroll from 'better-scroll'
import { mapMutations } from 'vuex'

export default {
	props:["hotCities","cities"],
	data (){
		return {
			scroll:""
		}
	},
	mounted (){
		let container = this.$refs["container"]    //获取DOM节点
		this.scroll = new BScroll(container)
	},
	methods:{
		changeSort(sortName){
//			console.log(sortName)          
//			console.log(this.$refs[sortName][0])

			this.scroll.scrollToElement(this.$refs[sortName][0]);	
		},
		changeCityName(CityName){
//			alert(CityName)
             this.changeCity(CityName);
             this.$router.push("./")
		},
		...mapMutations(["changeCity"])
	}
	
}		
</script>

<style scoped>
	.container{
		position: absolute;
		overflow: hidden;
		left: 0;
		right: 0;
		bottom: 0;
		top:.8rem ;
	}
	/*热门城市样式*/
	.hotcity .title{
		height: .36rem;
		line-height: .36rem;
		font-size: .12rem;
		padding-left: .1rem;
	}
	.hotcity .list{
		font-size: .14rem;
		background-color: #FFFFFF;	
		clear: both;
		overflow: hidden;
		text-align: center;
	}
	.hotcity>>> .list li{
		width: 33.3333%;
		height: .45rem;
		line-height: .45rem;
		float: left;
		text-align: center;
		box-sizing: border-box;
		border-bottom: 1px solid #DDDDDD;
		border-right: 1px solid #DDDDDD;
	}
	.hotcity .list li:nth-child(3n){
		border-right: none;
	}
	
	
	
	
	/*字母排序样式*/
	.sort .title{
		height: .36rem;
		line-height: .36rem;
		font-size: .12rem;
		padding-left: .1rem;
	}
	.sort .list{
		font-size: .14rem;
		background-color: #FFFFFF;	
		clear: both;
		overflow: hidden;
	}
	.sort>>> .list li{
		width: 16.6666%;
		height: .45rem;
		line-height: .45rem;
		float: left;
		text-align: center;
	}
	
	
	
	/*城市里列表样式*/
	.citylist .list .title{
		height: .36rem;
		line-height: .36rem;
		font-size: .12rem;
		padding-left: .1rem;
	}
	.citylist .list .list-item{
		font-size: .14rem;
		background-color: #FFFFFF;	
		clear: both;
		overflow: hidden;
	}
	.citylist>>> .list .list-item li{
		width: 25%;
		height: .45rem;
		line-height: .45rem;
		float: left;
		text-align: center;
		box-sizing: border-box;
		border-bottom: 1px solid #DDDDDD;
		border-right: 1px solid #DDDDDD;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.citylist .list .list-item li:nth-child(4n){
		border-right: none;
	}
	
	
</style>